import React, { memo } from 'react'
import { useDispatch, useSelector } from 'react-redux'


import { DetailWrapper } from './style'
import { changeDetailInfoAction,fetchData, fetchData2 } from '../../store/detail'


const Favtor = memo(() => {
  const { detailInfo,detailTitle,list } = useSelector(state =>state.detail)
  const dispatch = useDispatch()
  // function getInfo(){
  //   dispatch(changeDetailInfoAction())
  // }

  async function getList(){
    try {
      let res = await dispatch(fetchData2()).unwrap()
      console.log(res,'r')
    } catch (err) {
      console.error('Failed to save the post: ', err)
    }finally{
      console.log('finally')
    }
  }

  return (
    <DetailWrapper>
     <div>Favtor</div>
     <h6>detailTitle:{detailTitle}</h6>
     {
      detailInfo.map(item =>{
        return <li key={item.id}>{item.id}---{item.text}</li>
      })
     }
     <button onClick={e =>{dispatch(changeDetailInfoAction())}}>getInfo</button>
     <button onClick={e =>{dispatch(fetchData('ppp'))}}>getInfo</button>
     <button onClick={getList}>getList</button>
     <hr />
     {
      list.map(item =>{
        return <li key={item.id}>{item.name}</li>
      })
     }
    </DetailWrapper>
  )
})

export default Favtor